<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素节点选择器</title>
</head>
<body>
    <div name="div">
        我爱祖国！
        <div id="x" name="y" class="z">我爱我的祖国！</div>
        <div id="x" name="y" class="z">我爱我的祖国！</div>
        <div id="x1" name="y1" class="z1">我爱我的祖国！！</div>
        <div id="x1" name="y1" class="z1">我爱我的祖国！！</div>
        <div id="x x1" name="y y1" class="z z1">我爱我的祖国！！！</div>
        我爱我的国！
    </div>
    <script>
        console.log('一般节点:');
        /**
         * 一般选择方式
         //通过ID选择
         document.getElementById('idName');
         //通过类名（class属性）
         document.getElementsByClassName('className');
         //通过标签名称
         document.getElementsByTagName('tagName');
         //根据标签的name属性
         document.getElementsByName('name');
         使用document.querySelector()，和css3的选择器很类似
         document.querySelector('#id');
         document.querySelector('.class');
         document.querySelector('[class=className]');
         ……
         document.querySelectorAll();
         ……
         * @type {NodeListOf<Element>}
         */
        var div = document.getElementsByTagName('div');
        for(var i = 0;i < div.length;i++){
            div[i].style.color = 'red';
        }
        console.log(typeof div);
        console.log(div);

        var divId = document.getElementById('x');
        console.log(divId);

        var divName = document.getElementsByName('y');
        console.log(divName);

        var divClass = document.getElementsByClassName('z1');
        console.log(divClass);

        console.log('=============================');
        console.log('getElementBy vs querySelector');
        console.log('document.querySelector(\'#id\')');
        var a = document.querySelector('#x');
        var al = document.querySelectorAll('#x1');
        console.log(a);
        console.log(al);
        console.log('document.querySelector(\'.class\')');
        var z = document.querySelector('.z');
        var zl = document.querySelectorAll('.z1');
        console.log(z);
        console.log(zl);

        console.log('特殊节点:\n' +
            '//根节点\n' +
            'document\n' +
            '//body\n' +
            'document.body\n' +
            '//head\n' +
            'document.head\n' +
            '//声明文档类型节点\n' +
            'document.doctype\n' +
            '//html节点\n' +
            'document.documentElement');
        document.body.style.color = 'green';
        // document.body.style.backgroundColor = 'red';
        var d = document.documentElement;
        console.log(d);
        var h = document.head;
        console.log(h);
        var b = document.body;
        console.log(b);

        console.log('其它节点选择方式:');
        /**
         * 获取元素节点（推荐使用）
         //所有子节点
         i.children;
         //获取第一个子节点
         i.firstElementChild;
         //获取最后一个子节点
         i.lastElementChild;
         //获取上一个兄弟节点
         i.previousElementSibling;
         //获取下一个兄弟节点
         i.nextElementSibling;
         //获取父节点
         i.parentElement;
         */
    </script>
</body>
</html>